<template>
  <el-menu class="navbar"
           mode="horizontal">

    <!-- 收缩按钮 -->
    <hamburger class="hamburger-container"
               :toggleClick="toggleSideBar"
               :isActive="sidebar.opened"></hamburger>

    <!-- 面包屑 -->
    <breadcrumb class="breadcrumb-container"></breadcrumb>

    <!-- 头部右侧 选项 -->
    <div class="right-menu">
      <!-- 全屏 -->
      <el-tooltip effect="dark"
                  content="全屏"
                  placement="bottom">
        <screenfull class="right-menu-item"></screenfull>
      </el-tooltip>

      <!-- 快捷菜单 -->
      <el-dropdown class="right-menu-item">
        <el-button type="primary"
                   size="mini">
          用户名
          <i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <router-link to="/">
            <el-dropdown-item>
              <!-- 首页 -->
              首页
            </el-dropdown-item>
          </router-link>

          <el-dropdown-item>
              <span @click="showInfo()">
              个人信息
              </span>
          </el-dropdown-item>
          <el-dropdown-item>
              <span @click="showPass()">
              修改密码
              </span>
          </el-dropdown-item>
           <el-dropdown-item>
              <span @click="showMenuInfo()">
              供应商信息
              </span>
          </el-dropdown-item>

          <!--
          <router-link to="/modifyPassword">
            <el-dropdown-item>
             
              修改密码
            </el-dropdown-item>
          </router-link>
          -->
          <el-dropdown-item divided>
            <span @click="logout()"
                  style="display:block;">
              <!-- 退出 -->
              退出
            </span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      <!-- 国际化 -->

      <el-dropdown class="right-menu-item"
                   @command="changeLang">
        <a href="javascript:void(0);">
          {{getLang()}}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </a>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="cn">简体中文</el-dropdown-item>
          <el-dropdown-item command="tw">繁體中文</el-dropdown-item>
          <el-dropdown-item command="en">English</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

    <!--修改手机号-->
      <div class="v-modal" tabindex="0" style="z-index: 2014;" v-show="showphone2"  @click="hidephone()"></div>
      <el-card class="box-card userInfo2"  v-show="showphone2">
         <div slot="header" class="clearfix">
          <span style="font-weight:bold">修改手机号</span>
          <el-button style="float: right; padding: 3px 0;color:gray" type="text" @click="hidephone()" class="el-icon-close"></el-button>
        </div>
         
           <el-form :model="form">
    
            <el-form-item label="新的手机号:" label-width="30%" style="text-align:right"> 
              <el-input  size="mini" placeholder="新的手机号" v-model="form.mobile" autocomplete="off" style="width:80%;float:left"></el-input>
            </el-form-item>

            <el-form-item label="验证码:" label-width="30%" style="text-align:right">

               <el-input  size="mini" placeholder="验证码" v-model="form.code" autocomplete="off" style="width:35%;float:left"></el-input>
               <el-button type="primary" class="sendcode" v-show="show" size="mini" style="float:left;margin-left:5px" @click="getCodepass()">发送验证码</el-button>
               <el-button type="primary" class="sendcode" v-show="!show" size="mini" style="float:left;margin-left:5px" >{{count}} s</el-button>
            </el-form-item>
          </el-form>
         
          <div class="dialog-footer">
           
            <el-button type="primary" class="userinfo2btn" size="mini" style="float:right"  @click="changePhone()">确 定</el-button>
            <el-button type="info" class="userinfo2btn" size="mini" style="float:right"  @click="hidephone()">取 消</el-button>
          </div>
      </el-card>


       <!--供应商信息-->
      <div class="v-modal" tabindex="0" style="z-index: 2014;" v-show="showmenuinfo"  @click="hidemenuinfo()"></div>
      <el-card class="box-card userInfo3"  v-show="showmenuinfo"  :close-on-click-modal="false" :close-on-press-escape="false">
         <div slot="header" class="clearfix">
          <span style="font-weight:bold">供应商信息</span>
          <el-button style="float: right; padding: 3px 0;color:gray" type="text" @click="hidemenuinfo()" class="el-icon-close"></el-button>
        </div>
 
           <el-form :model="userInfo" :inline="true">
            <el-form-item label="供应商名称:" label-width="100px" label-position="right"> 
              <el-input  size="mini" placeholder="供应商名称" disabled v-model="menuInfo.menuName" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="供应商网站:" label-width="100px"> 
              <el-input  size="mini" placeholder="供应商网站" disabled v-model="menuInfo.menuWeb" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="总部地址:" label-width="100px"> 
              <el-input  size="mini" placeholder="总部地址" disabled v-model="menuInfo.companyNature" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="主营产品:" label-width="100px">
              <el-input  size="mini" placeholder="主营产品" disabled v-model="menuInfo.companyNature" autocomplete="off" ></el-input>
            </el-form-item>
            <el-form-item label="公司地址:" label-width="100px" > 
              <el-input  size="mini" placeholder="公司地址" disabled v-model="menuInfo.companyAddres" autocomplete="off" ></el-input>
            </el-form-item>

            <el-form-item label="公司电话:" label-width="100px" > 
              <el-input  size="mini" placeholder="公司电话" disabled v-model="menuInfo.companyTel" autocomplete="off" ></el-input>
            </el-form-item>
             <el-form-item label="联系人:" label-width="100px" > 
              <el-input  size="mini" placeholder="联系人" disabled v-model="menuInfo.companyContact" autocomplete="off"></el-input>
            </el-form-item>
             <el-form-item label="公司邮箱:" label-width="100px" > 
              <el-input  size="mini" placeholder="公司邮箱" disabled v-model="menuInfo.companyEmail" autocomplete="off"></el-input>
            </el-form-item>
         
            <div style="color:red;height:50px;line-height:50px;text-align:left;font-size:14px;">注: 如信息有误，请联系FoxCore客服</div>

          </el-form>
         
          <div class="dialog-footer">
            <el-button type="primary" size="mini" style="float:right" @click="hidemenuinfo()">确 定</el-button>
          </div>
      </el-card>



      <!--个人信息-->
      <div class="v-modal" tabindex="0" style="z-index: 2014;" v-show="showuserinfo"  @click="hideinfo()"></div>
      <el-card class="box-card userInfo"  v-show="showuserinfo">
         <div slot="header" class="clearfix">
          <span style="font-weight:bold">个人信息</span>
          <el-button style="float: right; padding: 3px 0;color:gray" type="text" @click="hideinfo()" class="el-icon-close"></el-button>
        </div>
         
           <el-form :model="userInfo">
            <el-form-item label="供应商:" label-width="25%" style="text-align:right"> 
              <el-input  size="mini" placeholder="供应商" disabled v-model="userInfo.menuName" autocomplete="off" style="width:65%;float:left"></el-input>
            </el-form-item>
            <el-form-item label="工号:" label-width="25%" style="text-align:right"> 
              <el-input  size="mini" placeholder="工号" disabled v-model="userInfo.employeeNo" autocomplete="off" style="width:65%;float:left"></el-input>
            </el-form-item>
            <el-form-item label="账号:" label-width="25%" style="text-align:right">
              <el-input  size="mini" placeholder="账号" disabled v-model="userInfo.account" autocomplete="off" style="width:65%;float:left"></el-input>
            </el-form-item>

            <el-form-item label="手机号:" label-width="25%" style="text-align:right">
              
              <el-input  size="mini" placeholder="手机号" disabled v-model="userInfo.mobile" autocomplete="off" style="width:65%;float:left"></el-input>
              <!--<el-button type="primary" size="mini" class="infobtn" style="float:right" @click="showpass()">修改手机号</el-button>-->
              <span @click="showphone()" style="width:80px !important;color:blue;cursor:pointer;float:left;">修改手机号</span>
            </el-form-item>

            <el-form-item label="岗位角色:"  label-width="25%" style="text-align:right">
              <el-input  size="mini" placeholder="岗位角色" disabled v-model="userInfo.roleName" autocomplete="off" style="width:65%;float:left"></el-input>
            </el-form-item>
            <div style="color:red;height:50px;line-height:50px;text-align:center;font-size:14px;">注: 如信息有误，请联系FoxCore客服</div>

          </el-form>
         
          <div class="dialog-footer">
            <el-button type="primary" size="mini" style="float:right" @click="hideinfo()">确 定</el-button>
          </div>
      </el-card>

    
      <!--修改密码-->
      <div class="v-modal" tabindex="0" style="z-index: 2014;" v-show="showpass"  @click="hidepass()"></div>
      <el-card class="box-card userInfo2"  v-show="showpass"> 
         <div slot="header" class="clearfix">
          <span style="font-weight:bold">修改密码</span>
          <el-button style="float: right; padding: 3px 0;color:gray" type="text" @click="hidepass()" class="el-icon-close"></el-button>
        </div>
         
           <el-form :model="form">
    
            <el-form-item label="原密码:" label-width="30%" style="text-align:right"> 
              <el-input  size="mini" placeholder="原密码" v-model="form.oldPassword" autocomplete="off" style="width:80%;float:left"></el-input>
            </el-form-item>
            <el-form-item label="新密码:" label-width="30%" style="text-align:right"> 
              <el-input  size="mini" placeholder="新密码" v-model="form.pass" autocomplete="off" style="width:80%;float:left"></el-input>
            </el-form-item>
               <el-form-item label="确认新密码:" label-width="30%" style="text-align:right"> 
              <el-input  size="mini" placeholder="确认新密码" v-model="form.newpass" autocomplete="off" style="width:80%;float:left"></el-input>
            </el-form-item>
       
          </el-form>
         
          <div class="dialog-footer">
           
            <el-button type="primary" class="userinfo2btn" size="mini" style="float:right"  @click="changePassword()">确 定</el-button>
            <el-button type="info" class="userinfo2btn" size="mini" style="float:right"  @click="hidepass()">取 消</el-button>
          </div>
      </el-card>


    </div>

  </el-menu>
</template>

<script>
    import { mapGetters } from "vuex";
    import Hamburger from "@/components/Hamburger";
    import Breadcrumb from "@/components/Breadcrumb";
    import Screenfull from "@/components/Screenfull";
    import { currentUser,MODIFYPWD,SMSMODIFYMOBILE,MODIFYMOBILE } from '@/utils/api';
    import { Message } from "element-ui";
    const TIME_COUNT = 60; // 倒计时的时间

    export default {
        data () {
            return {
                show:true,
                count:'',
                showpass:false, //显示密码
                showuserinfo:false,//显示个人信息
                showphone2:false,//显示修改手机
                showmenuinfo:false,//显示供应商
                form:{
                  employeeNo:'',
                  account:'',
                  mobile:'',
                  ruleName:'',
                  oldPassword:'',
                  pass:'',
                  newpass:'',
                },
                userInfo:{},
                menuInfo:{}
            };
        },
        components: {
            Breadcrumb,
            Hamburger,
            Screenfull
        },
        created(){

            this.getUserinfo()
            // this.getSampleMyList()
        },
        computed: {
            ...mapGetters(["sidebar"])
        },

        methods: {
             //显示密码
            showPass(){
              this.showpass = true
            },
            //隐藏密码
            hidepass(){
              this.showpass = false
            },
            //修改密码
            changePassword(){
              var _this = this;
              if (_this.form.oldPassword === "") {
                Message.error({ message: "请输入原密码" });
                return;
              }
              if (_this.form.pass === "") {
                Message.error({ message: "请输入新密码" });
                return;
              }
              if (_this.form.pass !== _this.form.newpass) {
                Message.error({ message: "两次密码不一致" });
                return;
              }

              MODIFYPWD({
                oldPassword: _this.form.oldPassword,
                pass: _this.form.pass
              }).then(res => {
                Message.success({ message: "修改成功" });
                _this.showpass = false 
                _this.form.oldPassword = ''
                _this.form.pass = ''
                _this.form.newpass = ''
                
              });
            },
            //显示个人信息
            showInfo(){
              //this.$store.commit("CHANGEPASS2_HIDE");
              //this.$store.commit("SHOWCARD"); 
              this.showuserinfo = true
            },
            //隐藏个人信息
            hideinfo(){
              this.showuserinfo = false
            },
             //显示供应商信息
            showMenuInfo(){
              //this.$store.commit("CHANGEPASS2_HIDE");
              //this.$store.commit("SHOWCARD"); 
              this.showmenuinfo = true
            },
            //隐藏供应商信息
            hidemenuinfo(){
              this.showmenuinfo = false
            },
            //获取个人信息
            getUserinfo() {
                this.loading = true
                currentUser({}).then(res => {
                    this.loading = false
                    this.userInfo = res.data.userInfo
                    this.userInfo.menuName = res.data.menuInfo.menuName
                    this.menuInfo = res.data.menuInfo
                  
                  })
                  .catch(() => {})

            },
            //显示修改手机
            showphone(){
              this.showuserinfo = false
              this.showphone2 = true
            },
            //隐藏修改手机
            hidephone(){
              this.showphone2 = false
            },
            //发送验证码
            getCodepass() {
              var _this = this;
              if (_this.form.mobile === "") {
                Message.error({ message: "请输入新手机号" });
                return;
              }
              SMSMODIFYMOBILE({
                mobile: _this.form.mobile
              }).then(res => {
                // 验证码倒计时
                if (!this.timer) {
                  this.count = TIME_COUNT;
                  this.show = false;
                  this.timer = setInterval(() => {
                    if (this.count > 0 && this.count <= TIME_COUNT) {
                      this.count--;
                    } else {
                      this.show = true;
                      clearInterval(this.timer);
                      this.timer = null;
                    }
                  }, 1000);
                }
              });
            },
            //执行 修改手机号
            changePhone(){
              var _this = this;
              if (_this.form.mobile === "") {
                Message.error({ message: "请输入新手机号" });
                return;
              }
              if (_this.form.code === "") {
                Message.error({ message: "请输入验证码" });
                return;
              }

              MODIFYMOBILE({
                mobile: _this.form.mobile,
                code: _this.form.code
              }).then(res => {
                Message.success({ message: "修改成功" });
              
              });

            },
            currentUser(){

                currentUser({

                }).then(res => {
                    console.log(res)
                    this.form.account= res.data.userInfo.account
                    this.form.mobile= res.data.userInfo.mobile
                    this.form.company= res.data.menuInfo.companyName
                    this.form.companyAddress= res.data.menuInfo.companyAddres
                    this.form.email= res.data.menuInfo.companyEmail
                    this.form.manufacturer= res.data.menuInfo.menuName
                    // this.addOrderForm.id= res.data.menuInfo.menuName
                    console.log(this.form)
                })
            },
            addMessage(){},
            //收缩按钮事件

            toggleSideBar () {

                this.$store.dispatch("toggleSideBar");
            },
            // 切换国际化
            changeLang (lang) {
                this.$i18n.locale = lang;
                localStorage.setItem("lang", lang);
            },
            // 选中文案
            getLang () {
                let lang = this.$i18n.locale;
                switch (lang) {
                    case "cn":
                        return "简体中文";
                    case "tw":
                        return "繁體中文";
                    case "en":
                        return "English";
                    case "ja":
                        return "日本語";
                    case "ko":
                        return "한국어";
                }
            },
            //退出登录
            logout () {
                this.$router.push("/login");
                // 已退出
            }
        }
    };
</script>

<style rel="stylesheet/scss" lang="scss">
.el-card.userInfo3{
    position: fixed;
    top: 20%;
    width: 40%;
    left: 30%;
    z-index: 2015;
  }
.el-card.userInfo{
    position: fixed;
    top: 20%;
    width: 30%;
    left: 35%;
    z-index: 2015;
  }
  .el-card.userInfo2{
    position: fixed;
    top: 20%;
    width: 30%;
    left: 35%;
    z-index: 2015;
  }
  .userInfo .el-form-item{
    margin-bottom:10px;
  }
  .userInfo .el-form-item__content{
    margin-left:0;
  }
  .userInfo .el-card__body , .userInfo2 .el-card__body , .userInfo3 .el-card__body{
      border-bottom: 1px solid #EBEEF5;
      padding-bottom: 0px;
      padding: 20px 25px;
  }
  .userInfo .el-button--primary{
      margin: 30px 0px 10px 0px
  }

  .userInfo3 .el-button--primary{
      margin: 30px 0px 10px 0px
  }

  .userInfo2 .el-button--primary,.userInfo2 .el-button--info{
      margin: 30px 0px 10px 0px;
      margin-right: 10px;
  }
  
  .el-card.userInfo2 .sendcode{
   margin: 0;
   height: 30px;
   margin-top: 5px;
   margin-right: 46px;
  }
  .userinfo2btn{
    margin: 30px 10px 10px 0px
  }



  .navbar {
    height: 50px;
    line-height: 50px;
    border-radius: 0px !important;
    .hamburger-container {
      line-height: 58px;
      height: 50px;
      float: left;
      padding: 0 0.5rem 0 1rem;
    }
    .breadcrumb-container {
      float: left;
    }

    .right-menu {
      display: flex;
      align-items: center;
      justify-content: center;
      float: right;
      height: 100%;
      &:focus {
        outline: none;
      }
      .right-menu-item {
        display: inline-block;
        margin: 0 8px;
      }

      .theme-switch {
        vertical-align: 15px;
      }
    }
  }
</style>


